<template>
	<view class="sam-purchase-container">
		<u-toast ref="uToast"></u-toast>

		<!-- 头部区域 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">邻里集市</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">精选好物</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-container">
				<view class="search-icon">
					<text class="cuIcon-search"></text>
				</view>
				<input class="search-input" :adjust-position="false" type="text" placeholder="搜索心仪商品"
					confirm-type="search" v-model="searchVal" @blur="searchGoods" />
				<view class="search-btn" @click="searchGoods" v-if="searchVal.trim()">
					<text class="search-text">搜索</text>
				</view>
			</view>
		</view>

		<!-- 商品列表区域 -->
		<view class="goods-section">
			<samGoodsListVue :category='category' :goodsList="goodsList" @getCategoryProduct="getCategoryProduct"
				@initSamGoods="initSamGoods" />
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar">
			<view class="action-left">
				<button class="action-btn service-btn" open-type="contact" hover-class="none">
					<view class="action-icon">
						<text class="cuIcon-service"></text>
					</view>
					<text class="action-text">客服</text>
				</button>
				<view class="action-btn cart-btn" @click="goPage('/pages/tabBar/cart')">
					<view class="action-icon">
						<text class="cuIcon-cart"></text>
					</view>
					<text class="action-text">购物车</text>
				</view>
			</view>
			<view class="action-right">
				<button class="request-btn" @click="DialogModal = true">
					<text class="btn-text">找不到想要的</text>
				</button>
			</view>
		</view>

		<!-- 请求新增商品弹窗 -->
		<view class="modal-overlay" :class="DialogModal?'show':''" @click="hideModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="modal-title">
						<text class="title-text">请求新增商品</text>
					</view>
					<view class="modal-close" @click="hideModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<view class="form-group">
						<view class="form-label">
							<text class="label-text">商品名称</text>
						</view>
						<input class="form-input" placeholder="请输入所需物品名称" v-model="form.title" />
					</view>

					<view class="form-group">
						<view class="form-label">
							<text class="label-text">详情描述</text>
						</view>
						<uni-easyinput class="form-textarea" :trim='true' :maxlength='-1' :clearable='true'
							type="textarea" autoHeight placeholder="请详细描述您需要的商品信息" v-model="form.content" />
						<view class="form-tip">
							<text class="tip-icon">💡</text>
							<text class="tip-text">提交之后，客服会根据所需选品及招商</text>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="hideModal">
						<text class="btn-text">取消</text>
					</button>
					<button class="submit-btn" @click="sendGoods">
						<text class="btn-text">提交</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import samGoodsListVue from '@/pages/homePages/samComponents/samGoodsList.vue';
	import storage from "@/utils/storage.js";
	import config from '@/config/config';
	import {
		getProductCategory,
		getShopsProduct
	} from '@/api/home.js'
	import {
		appeal
	} from "@/api/mine.js"

	export default {
		components: {
			headerSlotVue,
			samGoodsListVue
		},
		data() {
			return {
				config,
				DialogModal: false,
				category: [],
				goodsList: [],
				searchVal: '',
				form: {
					type: '其他',
					title: '',
					content: '',
				}
			}
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
			this.initSamGoods()
		},
		methods: {
			//获取商品类目
			initSamGoods() {
				getProductCategory().then(res => {
					this.category = res.data.data
					this.getCategoryProduct(res.data.data[0]._id)
				})
			},
			//根据类目获取商品
			getCategoryProduct(id) {
				getShopsProduct(id).then(res => {
					this.goodsList = res.data.data.list
				})
			},
			closePage() {
				// 使用navigateBack保持路由栈，避免清空导致无法返回
				uni.navigateBack({
					delta: 1
				});
			},
			goPage(route) {
				this.$router.smartNavigate({
					url: route
				})
			},
			searchGoods() {
				if (this.searchVal.trim()) {
					this.$router.smartNavigate({
						url: `/pages/homePages/sam/samSearchList?searchVal=${this.searchVal}`
					})
					this.searchVal = ''
				}
			},
			hideModal() {
				this.DialogModal = false
			},
			sendGoods() {
				if (!this.form.title.trim()) {
					uni.showToast({
						title: "请填写商品名称",
						icon: "error",
					});
					return
				}

				if (!this.form.content.trim()) {
					uni.showToast({
						title: "请填写详情描述",
						icon: "error",
					});
					return
				}
				this.form.contactName = this.userInfo.nickname
				this.form.communityId = this.userInfo.community._id
				this.form.contactPhone = this.userInfo.phone
				appeal(this.form).then(res => {
					uni.showToast({
						title: "提交成功",
						icon: "success",
					});
					this.hideModal()
					// 清空表单
					this.form.title = ''
					this.form.content = ''
				}).catch(err => {
					uni.showToast({
						title: "提交失败",
						icon: "error",
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sam-purchase-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 1);
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 24rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 搜索区域
	.search-section {
		padding: 24rpx;
		background: white;
		margin-bottom: 16rpx;

		.search-container {
			display: flex;
			align-items: center;
			background: #f8f9fa;
			border-radius: 24rpx;
			padding: 0 20rpx;
			border: 2rpx solid transparent;
			transition: all 0.3s ease;

			&:focus-within {
				border-color: #FF6B35;
				background: white;
				box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.1);
			}

			.search-icon {
				margin-right: 16rpx;

				text {
					font-size: 32rpx;
					color: #999;
				}
			}

			.search-input {
				flex: 1;
				height: 72rpx;
				font-size: 28rpx;
				color: #333;
				background: transparent;
			}

			.search-btn {
				margin-left: 16rpx;
				padding: 8rpx 16rpx;
				background: #FF6B35;
				border-radius: 16rpx;

				.search-text {
					color: white;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}
	}

	// 商品列表区域
	.goods-section {
		flex: 1;
		background: white;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
	}

	// 底部操作栏
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		border-top: 1px solid #f0f0f0;
		padding: 16rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
		z-index: 100;

		.action-left {
			display: flex;
			align-items: center;
			gap: 32rpx;

			.action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: transparent;
				border: none;
				padding: 0;
				position: relative;
				line-height: 1;
				font-size: inherit;

				.action-icon {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8rpx;

					text {
						font-size: 32rpx;
						color: #666;
					}
				}

				.action-text {
					font-size: 22rpx;
					color: #666;
				}

				&.service-btn {
					.action-icon text {
						color: #52C41A;
					}
				}

				&.cart-btn {
					.action-icon text {
						color: #1890FF;
					}
				}
			}
		}

		.action-right {
			flex: 1;
			margin-left: 32rpx;

			.request-btn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(135deg, #FF6B35 0%, #FE6100 50%, #FF8A00 100%);
				border: none;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(254, 97, 0, 0.3);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.5s;
				}

				&:active::before {
					left: 100%;
				}

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.4);
				}

				.btn-text {
					color: white;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		}
	}

	// 弹窗样式
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;

		&.show {
			opacity: 1;
			visibility: visible;
		}

		.modal-content {
			background: white;
			border-radius: 24rpx;
			width: 90%;
			max-width: 600rpx;
			max-height: 80vh;
			overflow: hidden;
			transform: scale(0.8);
			transition: all 0.3s ease;

			.show & {
				transform: scale(1);
			}

			.modal-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 24rpx 24rpx;
				border-bottom: 1px solid #f0f0f0;

				.modal-title {
					.title-text {
						font-size: 32rpx;
						font-weight: 700;
						color: #333;
					}
				}

				.modal-close {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background: #f5f5f5;

					.close-icon {
						font-size: 32rpx;
						color: #999;
						font-weight: 300;
					}
				}
			}

			.modal-body {
				padding: 24rpx;

				.form-group {
					margin-bottom: 24rpx;

					.form-label {
						margin-bottom: 12rpx;

						.label-text {
							font-size: 28rpx;
							font-weight: 600;
							color: #333;
						}
					}

					.form-input {
						width: 100%;
						height: 80rpx;
						border: 2rpx solid #f0f0f0;
						border-radius: 12rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background: #fafafa;
						transition: all 0.3s ease;

						&:focus {
							border-color: #FF6B35;
							background: white;
						}
					}

					.form-textarea {
						border: 2rpx solid #f0f0f0;
						border-radius: 12rpx;
						background: #fafafa;
						transition: all 0.3s ease;

						&:focus-within {
							border-color: #FF6B35;
							background: white;
						}
					}

					.form-tip {
						display: flex;
						align-items: center;
						margin-top: 12rpx;

						.tip-icon {
							font-size: 24rpx;
							margin-right: 8rpx;
						}

						.tip-text {
							font-size: 24rpx;
							color: #FF6B35;
						}
					}
				}
			}

			.modal-footer {
				display: flex;
				align-items: center;
				padding: 24rpx;
				border-top: 1px solid #f0f0f0;
				gap: 16rpx;

				.cancel-btn {
					flex: 1;
					height: 80rpx;
					border: 2rpx solid #ddd;
					border-radius: 40rpx;
					background: white;
					display: flex;
					align-items: center;
					justify-content: center;

					.btn-text {
						color: #666;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.submit-btn {
					flex: 1;
					height: 80rpx;
					background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
					border: none;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.btn-text {
						color: white;
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.sam_goods {
		background-color: #fff;
		padding: 24rpx 0;
	}

	.sam_operate {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		background-color: #fff;
	}

	.warn_tip {
		padding: 12rpx 0;
		text-align: left;
	}
</style>